<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <!-- TemplateExport -->
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <el-dialog
      title="Order Details提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div>
        <div class="dialog_content_item">
          充电时长:
          <span style="margin-left:5px">{{
            formatSeconds(orderDetail.chargeTime) || 0
          }}</span>
        </div>
        <div class="dialog_content_item">
          充电电量:
          <span style="margin-left:5px"
            >{{ orderDetail.chargeElect || 0 }}度</span
          >
        </div>
        <div class="dialog_content_item">
          PaymentMoney:
          <span style="margin-left:5px"
            >{{ orderDetail.actuallyPay || 0 }}元</span
          >
        </div>
        <div class="dialog_content_item">
          Package Name:
          <span style="margin-left:5px">{{ mealCharge_detail.mealName }}</span>
        </div>
        <div class="dialog_content_item">
          收费标准:
          <span style="margin-left:5px"
            >{{
              mealCharge_detail.type == 1
                ? "每小时"
                : mealCharge_detail.type == 2
                ? "每度电量"
                : "---"
            }}/{{ mealCharge_detail.price || 0 }}元</span
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // TemplateExportData
      searchHandleAdd: [
        {
          label: "ExportData",
          icon: "el-icon-download",
          type: "success",
          loading: false,
          // handle: (that) => this.handleDownload(),
          handle: async e => {
            const res = await this.apis.orderChargeExport();
            // console.log("res---", res.msg);
            location.href =
              process.env.VUE_APP_URL + "/profile/download" + res.msg;
          }
        }
      ],
      centerDialogVisible: false,
      orderDetail: {},
      mealCharge_detail: {},
      searchData: {
        orderNo: "",
        sn: "",
        phone: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 200
        },
        { type: "input", placeholder: "Device Number", prop: "sn", width: 200 },
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 180,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 180,
          change: val => {
            this.searchData.endTime = val;
          }
        },
        { type: "input", placeholder: "用户Phone", prop: "phone", width: 200 }
      ],
      searchHandle: [
        { type: "primary", label: "Search", handle: e => this.getData() }
        // {type:'primary',label:'Reset', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        // { label: "Order Type", prop: "nickName",  },
        { label: "Device Number", prop: "sn" },
        { label: "设备所属信息", prop: "operatorName" },
        { label: "用户信息", prop: "userName" },
        { label: "用户Phone", prop: "phone" },

        { label: "收费标准", prop: "mealMoney" },
        {
          label: "收费类型",
          prop: "mealType",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.mealType == 1
                ? "按小时收费"
                : row.mealType == 2
                ? "按功率收费"
                : "--") +
              "</p>";
            return html;
          }
        },
        { label: "占位费", prop: "overduePay" },
        {
          label: "占位时间",
          prop: "overdueTime",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              ((Math.floor(row.overdueTime / 60) + "小时" == "0小时"
                ? ""
                : Math.floor(row.overdueTime / 60) + "小时") +
                (row.overdueTime - Math.floor(row.overdueTime / 60) * 60) +
                "分钟") +
              "</p>";
            return html;
          }
        },

        { label: "充电Money", prop: "actuallyPay" },
        { label: "合计Money", prop: "totalPay" },
        {
          label: "订单Status",
          prop: "status",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.status == 0
                ? "Charging"
                : row.status == 1
                ? "Payment完成"
                : row.status == 2
                ? "待Payment"
                : row.status == 3
                ? "有退款"
                : row.status == 4
                ? "用户Cancel"
                : "--") +
              "</p>";
            return html;
          }
        },
        {
          label: "充电Status",
          prop: "btStatus",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.btStatus == 0
                ? "Charging"
                : row.btStatus == 1
                ? "充电完成"
                : row.btStatus == 2
                ? "Battery取出"
                : "--") +
              "</p>";
            return html;
          }
        },
        {
          label: "Payment方式",
          prop: "payType",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.payType == 1
                ? "WeChat"
                : row.payType == 2
                ? "Balance"
                : row.payType == 3
                ? "刷卡"
                : "--") +
              "</p>";
            return html;
          }
        },
        { label: "Payment时间", prop: "ftime" },
        { label: "Submission Time", prop: "ctime" },
        {
          label: "Operations",
          type: "button",
          width: 200,
          btnList: [
            {
              label: "End Order",
              type: "text",
              handle: row => {
                // console.log("End Orderrow------", row);

                this.$confirm("Confirm要End Order吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.orderCharge_endOrder({
                      id: row.id
                    });
                    this.$message({
                      type: "success",
                      message: "Operations Success!"
                    });
                    this.getData();
                  })
                  .catch(() => {});
              }
            },
            {
              label: "Order Details",
              type: "text",
              handle: async row => {
                const res = await this.apis.orderCharge_detailOrder({
                  id: row.id
                });
                if (res.code == 200) {
                  this.orderDetail = res.data;
                  const res2 = await this.apis.mealCharge_detail(
                    res.data.mealId
                  );

                  this.mealCharge_detail = res2.data;
                  this.centerDialogVisible = true;
                } else {
                  this.$message.error("Operations Failure!");
                }
              }
            }
          ]
        }
      ],
      tableHandles: [
        // {
        //   label: "DataExport",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      checkBox: []
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    formatSeconds(value) {
      var theTime1 = parseInt(value); // 需要转换的时间分钟
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天

      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
        if (theTime2 > 24) {
          // 大于24小时
          theTime3 = parseInt(theTime2 / 24);
          theTime2 = parseInt(theTime2 % 24);
        }
      }
      var result = "";
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分钟";
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
    userDetailsCall() {
      this.userDetailsData.show = false;
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.orderCharge_list({
        orderNo: this.searchData.orderNo,
        sn: this.searchData.sn,
        phone: this.searchData.phone,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      var list = res.rows || [];

      this.tableData = list;
      this.pagination.total = res.total;

      if (process.env.VUE_APP_URL.includes("charge-cabinet")) {
        this.tableCols.splice(2, this.tableCols[2].label === "仓门号" ? 1 : 0, {
          label: "仓门号",
          prop: "newCabinetNo"
        });
        // 特电才显示
        this.tableCols.splice(
          5,
          this.tableCols[5].label === "充电电流" ? 4 : 0,
          {
            label: "充电电流",
            prop: "chargeCurrent",
            type: "html",
            html: row => {
              return row.chargeCurrent / 100 + "mA";
            }
          },
          {
            label: "充电Voltage",
            prop: "chargeVoltage",
            type: "html",
            html: row => {
              return row.chargeVoltage / 100 + "V";
            }
          },
          {
            label: "已充电量",
            prop: "quantity",
            type: "html",
            html: row => {
              return row.quantity ? row.quantity + "%" : "0%";
            }
          },
          {
            label: "BatteryTemperature",
            prop: "batteryTemperature",
            type: "html",
            html: row => {
              return row.batteryTemperature
                ? row.batteryTemperature + "°C"
                : "0°C";
            }
          }
        );
      }
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.dialog_content_item {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-content: center;
}

.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}
</style>
